<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="项目名称" prop="name">
        <el-input
          v-model="queryParams.name"
          placeholder="请输入项目名称"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
        >立项</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" size="mini" :data="projectList" @selection-change="handleSelectionChange" border stripe>
      <el-table-column label="项目名称" align="center" prop="name" />
      <el-table-column label="项目状态" align="center" prop="status" :formatter="statusFormat"/>
      <el-table-column label="创建时间" align="center" prop="createTime" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-detail"
            v-if="parseInt(scope.row.status)>=40"
            @click="handleDetail(scope.row)"
          >详情</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改仲裁项目对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="60%" append-to-body>
    <el-form ref="form" :model="form" :rules="rules" label-width="180px">
      <el-form-item label="项目所属公司" prop="companyId">
        <el-input v-model="form.companyName" placeholder="请输入项目所属公司" disabled/>
      </el-form-item>
      <el-form-item label="项目名称" prop="name">
        <el-input v-model="form.name" placeholder="请输入项目名称" />
      </el-form-item>
      <el-form-item label="预计案件数量" prop="case_number">
        <el-select v-model="form.case_number" placeholder="请选择预计案件数量" style="width: 320px;">
          <el-option
              v-for="dict in projectParams.case_number"
              :key="dict.id"
              :label="dict.name"
              :value="dict.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="预计案件时间单位" prop="case_date_unit">
        <el-select v-model="form.case_date_unit" placeholder="请选择预计案件时间单位" style="width: 320px;">
          <el-option
              v-for="dict in projectParams.case_date_unit"
              :key="dict.id"
              :label="dict.name"
              :value="dict.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="单个案件标的额范围" prop="amount_scope_single">
        <el-select v-model="form.amount_scope_single" placeholder="请选择单个案件标的额范围" style="width: 320px;">
          <el-option
              v-for="dict in projectParams.amount_scope_single"
              :key="dict.id"
              :label="dict.name"
              :value="dict.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="预计年标的额范围" prop="amount_scope_year">
        <el-select v-model="form.amount_scope_year" placeholder="请选择预计年标的额范围" style="width: 320px;">
          <el-option
              v-for="dict in projectParams.amount_scope_year"
              :key="dict.id"
              :label="dict.name"
              :value="dict.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="对接仲裁类型" prop="type">
        <el-select v-model="form.type" placeholder="请选择对接仲裁类型" style="width: 320px;">
          <el-option
              v-for="dict in arbitrationTypes"
              :key="dict.value"
              :label="dict.name"
              :value="dict.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="项目简介" prop="intro">
        <el-input type="textarea" v-model="form.intro" placeholder="请输入项目简介" />
      </el-form-item>
      <el-form-item label="附件添加（合同或证据材料）">
        <el-upload
            class="upload-demo"
            ref="upload"
            :action="uploadUrl()"
            :data="form"
            :on-change="fileChange"
            :file-list="fileList"
            :auto-upload="false">
          <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
          <div slot="tip" class="el-upload__tip">(您可以上传图片、文档、表格、PDF、音频、视频，最多上传5份，每份文件大小限制在20MB以内)</div>
        </el-upload>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" size="mini" :loading="loading" @click="onSubmit">确 定</el-button>
      <el-button size="mini" @click="cancel">取 消</el-button>
    </div>
  </el-dialog>

    <el-dialog title="项目详情" :visible.sync="detailDialogVisible" center :close-on-click-modal="false" width="85%" append-to-body>
      <el-tabs v-model="activeName" tab-position="top">
        <el-tab-pane label="项目信息" name="first">
          <el-row>
            <el-col>
              <div class="clearfix">
                <div style="width: 4px; height: 16px; background-color: #62a8ea; display:inline-block; margin-right: 5px; margin-left: 8px;"></div>
                <span class="title">项目资料</span>
              </div>
              <el-divider/>
              <el-form label-width="160px">
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="申请人:">
                      <label v-if="this.projectDetail !== undefined">{{this.projectDetail.petitioner}}</label>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="案件主合同名称:">
                      <label v-if="this.projectDetail !== undefined">{{this.projectDetail.name}}</label>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="项目状态:">
                      <label v-if="this.projectDetail !== undefined">{{this.projectDetail.status}}</label>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="案件数量:">
                      <label v-if="this.projectDetail !== undefined">{{this.projectDetail.case_number+"/"+this.projectDetail.case_date_unit}}</label>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="单个案件标的额范围:">
                      <label v-if="this.projectDetail !== undefined">{{this.projectDetail.amount_scope_single}}</label>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="预计年标的额范围:">
                      <label v-if="this.projectDetail !== undefined">{{this.projectDetail.amount_scope_year}}</label>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item label="项目简介:">
                      <label v-if="this.projectDetail !== undefined">{{this.projectDetail.intro}}</label>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item label="附件:">
                      <template v-if="this.projectDetail !== undefined && this.projectDetail.attachment !== undefined">
                        <div style="display:inline-block; text-align: center;" v-for="item in this.projectDetail.attachment" :key="item.file_attachment_id" @click="downloadAttachmentHandle(item.file_attachment_url)">
                          <div style="display:block;"><i class="el-icon-document" style="font-size: xx-large;"></i></div>
                          <span>{{item.filename}}</span>
                        </div>
                      </template>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <div class="clearfix">
                <div style="width: 4px; height: 16px; background-color: #62a8ea; display:inline-block; margin-right: 5px; margin-left: 8px;"></div>
                <span class="title">项目配置</span>
              </div>
              <el-divider/>
              <el-form label-width="160px">
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="项目名称:">
                      <label v-if="this.projectDetail !== undefined">{{this.projectDetail.title}}</label>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="项目有效期:">
                      <label v-if="this.projectDetail !== undefined">{{this.projectDetail.expiry_start_time+"-"+this.projectDetail.expiry_end_time}}</label>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="案件类型:">
                      <label v-if="this.projectDetail !== undefined">{{this.projectDetail.case_type}}</label>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="仲裁员:">
                      <label v-if="this.projectDetail !== undefined">{{this.projectDetail.arbitrators}}</label>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="申请人推荐仲裁员:">
                      <label v-if="this.projectDetail !== undefined"></label>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="被申请人推荐仲裁员:">
                      <label v-if="this.projectDetail !== undefined"></label>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item label="办案秘书:">
                      <label v-if="this.projectDetail !== undefined">{{this.projectDetail.b_secretary_name+" 联系电话:"+this.projectDetail.b_secretary_mobile+"; 传真号:"+this.projectDetail.b_secretary_fax+"; 邮箱:"+this.projectDetail.b_secretary_email}}</label>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item label="立案秘书:">
                      <label v-if="this.projectDetail !== undefined">{{this.projectDetail.l_secretary_name+" 联系电话:"+this.projectDetail.l_secretary_mobile+"; 传真号:"+this.projectDetail.l_secretary_fax+"; 邮箱:"+this.projectDetail.l_secretary_email}}</label>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <div class="clearfix">
                <div style="width: 4px; height: 16px; background-color: #62a8ea; display:inline-block; margin-right: 5px; margin-left: 8px;"></div>
                <span class="title">缴费方式</span>
              </div>
              <el-divider/>
              <el-form label-width="160px">
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="缴费方式:">
                      <label v-if="this.projectDetail !== undefined">{{this.projectDetail.cooperation_mode}}</label>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="缴费规则:">
                      <el-button type="text" @click="paymentDetailsDialogVisible = true">收费明细</el-button>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="缴费记录" name="second">
          <el-form inline style="margin-bottom:15px;">
              <el-form-item label="扣费规则:">
                <el-button type="text" @click="paymentDetailsDialogVisible = true">收费明细</el-button>
                <el-button size="small" type="warning" @click="accountDialogVisible = true">仲裁委对公账号</el-button>
              </el-form-item>
          </el-form>
          <el-table size="mini" v-if="this.projectExpenseDetail !== undefined" :data="projectExpenseDetail.lists" @selection-change="handleSelectionChange" border stripe>
            <el-table-column label="缴纳前余额（元）" align="center" prop="balance_before" :formatter="moneyFormat"/>
            <el-table-column label="应缴（元）" align="center" prop="amount_payable" :formatter="moneyFormat"/>
            <el-table-column label="实缴（元）" align="center" prop="amount_paid" :formatter="moneyFormat"/>
            <el-table-column label="缴纳后余额（元）" align="center" prop="createTime" :formatter="moneyFormat"/>
            <el-table-column label="缴纳时间" align="center" prop="paid_time" />
            <el-table-column label="确认缴纳时间" align="center" prop="confirm_time" />
            <el-table-column label="状态" align="center" prop="status_value" />
            <el-table-column label="缴纳凭证" align="center" >
              <template slot-scope="scope">
                <el-button size="mini" type="primary" v-if="scope.row.payment_of_voucher !== null" @click="getImageList(scope.row.payment_of_voucher)">查看缴费凭证</el-button>
              </template>
            </el-table-column>
            <el-table-column label="收款回执" align="center" >
              <template slot-scope="scope">
                <el-button size="mini" type="primary" v-if="scope.row.return_receipt !== null" @click="getImageList(scope.row.return_receipt)">查看收款回执</el-button>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" class-name="small-padding">
              <template slot-scope="scope">
                <el-button
                    size="mini"
                    type="primary"
                    v-if="parseInt(scope.row.status)===1"
                    @click="handleToPayment(scope.row)"
                >缴纳预交仲裁费用</el-button>
              </template>
            </el-table-column>
          </el-table>

          <pagination
              v-if="this.projectExpenseDetail !== undefined && this.projectExpenseDetail.page !== undefined"
              v-show="projectExpenseDetail.page.total_number>0"
              :total="projectExpenseDetail.page.total_number"
              :page.sync="projectExpensePage"
              :limit.sync="projectExpenseSize"
              @pagination="getProjectExpenseDetailList"
          />
        </el-tab-pane>
      </el-tabs>
      <div slot="footer" class="dialog-footer">
        <el-button  size="mini" type="primary"  @click="detailDialogVisible = false">关闭</el-button>
      </div>
    </el-dialog>

    <!--  图片预览  -->
    <el-image-viewer v-if="this.showViewer" :on-close="()=>{this.showViewer = false}" :url-list="previewUrlList" style="z-index: 100000;"/>

    <!--  收费明细  -->
    <el-dialog :title="showTitle" :visible.sync="paymentDetailsDialogVisible" center :close-on-click-modal="false" width="800px" append-to-body>
      <el-row>
        <el-col :span="24">
          <div class="clearfix">
            <span style="font-size: 16px; font-weight: 500; color: black;">一、网络快速仲裁案件的范围</span>
          </div>
        </el-col>
        <el-col :span="24">
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;快速仲裁云平台受理在网址http://oa.cietac-hb.org上注册立项后，使用平台批量处理、在线审理的仲裁案件，案件办理全程均在平台上进行。
        </el-col>
        <el-col :span="24" style="margin-top: 10px;">
          <div class="clearfix">
            <span style="font-size: 16px; font-weight: 500; color: black;">二、网络快速仲裁案件收费项目</span>
          </div>
        </el-col>
        <el-col :span="24">
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;仲裁云平台的案件应缴纳案件受理费。原则上不收取案件处理费，一经立案不再适用《仲裁规则》中关于退费的规定。但如因电子送达失败，出于正当程序需要必然发生线下程序的，视程序情形，收取案件处理费。
        </el-col>
        <el-col :span="24" style="margin-top: 10px;">
          <div class="clearfix">
            <span style="font-size: 16px; font-weight:500; color: black;">三、具体计费方法</span>
          </div>
        </el-col>
        <el-col :span="24">
          <el-table
              :data="tableData"
              border
              size="small"
              style="width: 100%">
            <el-table-column
                align="center"
                prop="label"
                label="标的额">
            </el-table-column>
            <el-table-column
                prop="value"
                label="收费标准"
                align="center">
            </el-table-column>
          </el-table>
          *均以人民币计数。
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" type="primary" @click="paymentDetailsDialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 收款账号信息   -->
    <el-dialog :visible.sync="accountDialogVisible" center width="600px" >
      <el-form label-width="160px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="收款单位:">
              <label>中国国际经济贸易仲裁委员会湖北分会</label>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="开户银行:">
              <label>中国建设银行武汉学苑支行</label>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="人民币账号:">
              <label>42050116707700000029</label>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" type="primary"  @click="accountDialogVisible = false">关闭</el-button>
      </div>
    </el-dialog>

    <!--  上传付款回执证明  -->
    <el-dialog title="上传缴费凭证" :visible.sync="paymentDialogVisible" center width="600px" :close-on-click-modal="false" append-to-body>
      <el-form label-width="160px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="应缴纳预付仲裁费用:">
              <label v-if="this.paymentItem !== undefined">{{moneyFormat(this.paymentItem,null,this.paymentItem.amount_payable,0)}}元</label>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="上传银行转账回执:">
              <el-upload
                  class="avatar-uploader"
                  action="https://jsonplaceholder.typicode.com/posts/"
                  :show-file-list="false"
                  :auto-upload="false"
                  :on-change="paymentFileChangeHandler"
                  :before-upload="beforeAvatarUpload">
                <img v-if="imageUrls !== ''" :src="imageUrls" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过2M</div>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini"  @click="paymentCancelHandler">关闭</el-button>
        <el-button size="mini" type="primary" :loading="isUploadPayment"  @click="paymentSubmitHandle">提交</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { listProject, getProject, delProject, addProject, updateProject, exportProject,getProjectDicts, crateProject, projectDetailById, projectExpenseDetailById,submitPaymentVoucher} from "@/api/zfw/arbitration/project";
import Cookies from 'js-cookie'
import { Loading } from 'element-ui';

let tokenStr = Cookies.get('token');
let userMobile = Cookies.get('phone');
export default {
  name: "Project",
  components: {
    'el-image-viewer':()=>import('element-ui/packages/image/src/image-viewer')
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 仲裁项目表格数据
      projectList: [],
      //仲裁委类型
      arbitrationTypes:[],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        companyId: undefined,
        type: undefined,
        projectId: undefined,
        name: undefined,
        valid: undefined
      },
      //上传付款凭证显示
      paymentDialogVisible:false,
      //付款条目
      paymentItem:undefined,
      //预览图片列表
      previewUrlList:[],
      showViewer:false,
      //是否弹出账号信息
      accountDialogVisible:false,
      showTitle:"贸仲委网络快速仲裁案件收费暂行办法(2019年1月11日起施行)",
      //项目参数
      projectParams:{
        case_number:[],
        amount_scope_year:[],
        amount_scope_single:[],
        case_date_unit:[],
        status:[],
      },
      paymentDetailsDialogVisible:false,
      //项目id
      projectId:0,
      //项目详情
      projectDetail:undefined,
      //项目费用详情
      projectExpenseDetail:undefined,
      projectExpensePage: 1,
      projectExpenseSize: 10,
      //文件列表
      fileList:[],
      // 表单参数
      form: {},
      //付款凭证路径
      imageUrls: '',
      imagePaymentFile:undefined,
      // 表单校验
      rules: {
        name: [
          {required: true, message: "项目不能为空", trigger: "blur"}
        ],
        case_number: [
          {required: true, message: "预计案件数量不能为空", trigger: "blur"}
        ],
        case_date_unit: [
          {required: true, message: "预计案件时间单位不能为空", trigger: "blur"}
        ],
        amount_scope_single: [
          {required: true, message: "单个案件标的额范围不能为空", trigger: "blur"}
        ],
        amount_scope_year: [
          {required: true, message: "预计年标的额范围不能为空", trigger: "blur"}
        ],
      },
      tableData:[
        {
          label:'5000元以下（含5000元）',
          value:'300元'
        },
        {
          label:'5000-1万元（含1万元））',
          value:'500元'
        },
        {
          label:'1万-3万元（含3万元）',
          value:'800元'
        },
        {
          label:'3万-5万元（含5万元）',
          value:'1000元'
        },
        {
          label:'5万-10万元（含10万元）',
          value:'1500元'
        },
        {
          label:'10万-20万元（含20万元）',
          value:'2000元'
        },
        {
          label:'20万-30万元（含30万元）',
          value:'3000元'
        },
        {
          label:'30万-40万元（含40万元）',
          value:'4000元'
        },
        {
          label:'40万-50万元（含50万元）',
          value:'5000元'
        },
        {
          label:'50万元以上',
          value:'5000元+50万元以上部分的1%'
        },
        {
          label:'100万元以上',
          value:'10000元+100万元以上部分的0.5%'
        },
        {
          label:'200万元以上',
          value:'15000元+200万元以上部分的0.4%'
        },
        {
          label:'300万元以上',
          value:'19000元+300万元以上部分的0.3%'
        },
        {
          label:'400万元以上',
          value:'22000元+400万元以上部分的0.2%'
        }
        ,
        {
          label:'500万元以上',
          value:'24000元+500万元以上部分的0.1%'
        }
      ],
      activeName: 'first',
      detailDialogVisible: false,
      //上传缴费凭证加载框
      isUploadPayment: false
    };
  },
  created() {
    this.getList();
    this.getDicts("sys_arbitration_type").then(response => {
      this.arbitrationTypes = response.data;
    });
    getProjectDicts().then(result =>{
      this.projectParams = result.data;
    })
  },
  methods: {
    /** 查询仲裁项目列表 */
    getList() {
      this.loading = true;
      listProject(this.queryParams).then(response => {
        this.projectList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 字典状态字典翻译
    statusFormat(row, column) {
      let actions = [];
      for(let item in this.projectParams.status){
        if(this.projectParams.status[item].id === parseInt(row.status)){
          actions.push(this.projectParams.status[item].name);
        }
      }
      return actions.join('');
    },
    //获取图片预览列表
    getImageList(attachments){
      let images = [];
      if(attachments !== null){
        for (let i = 0; i < attachments.length; i++) {
          let image = attachments[i];
          images.push(image.url);
        }
      }
      this.previewUrlList = images;
      this.showViewer = true;
    },
    //显示上传付款凭证界面
    handleToPayment(row){
      this.paymentDialogVisible = true;
      this.paymentItem = row;
    },
    //提交上传付款凭证
    paymentSubmitHandle(){
      if(this.imagePaymentFile === undefined){
        this.$message.error("请选择银行转账回凭证")
        return
      }
      this.isUploadPayment = true;
      let formData = new FormData();
      formData.append("file", this.imagePaymentFile);
      submitPaymentVoucher(this.projectId,formData).then(res =>{
        this.isUploadPayment = false;
        if (res.code === 0) {
          this.paymentDialogVisible = false;
          this.$message.success("凭证上传成功")
          this.imageUrls = '';
          this.imagePaymentFile = undefined;
          this.getProjectExpenseDetailList();
        } else {
          this.$message.error(res.msg)
        }
      });
    },
    paymentCancelHandler(){
      this.paymentDialogVisible = false;
      this.imageUrls = '';
    },
    //凭证上传文件
    paymentFileChangeHandler(file, fileList){
      this.imageUrls = URL.createObjectURL(file.raw);
      this.imagePaymentFile = file.raw;
    },
    handleAvatarSuccess(res, file) {
      // this.imageUrls = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'||'image/png';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    //金额格式化
    moneyFormat(row, column, value, index) { // 金额 格式化
      if (!value && value !== 0) return '-';
      let intPart = Number(value) | 0; //获取整数部分
      let intPartFormat = intPart.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,'); //将整数部分逢三一断
      let floatPart = ".00"; //预定义小数部分
      let value2Array = value.toString().split(".");
      //=2表示数据有小数位
      if (value2Array.length === 2) {
        floatPart = value2Array[1].toString(); //拿到小数部分
        if (floatPart.length === 1) { //补0,实际上用不着
          return intPartFormat + "." + floatPart + '0';
        } else {
          return intPartFormat + "." + floatPart;
        }
      } else {
        return intPartFormat + floatPart;
      }
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: 0,
        companyId: 0,
        type: '1',
        projectId: 0,
        name: '',
      };
      this.fileList = [];
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    //下载附件
    downloadAttachmentHandle: function (href) {
      // let href = row.ossFilePath
      window.open(href, '_blank')
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset()
      this.open = true
      this.title = "立项"
      this.form.companyId = this.$store.state.user.companyId;
      this.form.companyName = this.$store.state.user.companyName;
    },
    headers(){
      return{
        'token': tokenStr,
        'User': userMobile,
      }
    },
    // 文件改变时
    fileChange(file, fileList) {
      this.fileList = fileList
    },
    uploadUrl () {
      return process.env.VUE_APP_API + "/arbitration/project/createProject/"
    },

    onSubmit() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.loading = true;
          let formData = new FormData();
          this.fileList.forEach(item => {
            formData.append("attachment", item.raw);
          });
          for(let key in this.form){
            formData.append(key, this.form[key]);
          }
          crateProject(formData).then(res => {
            this.loading = false;
            if (res.code === 100) {
              this.$message.success(res.msg)
              this.open = false;
              this.getList();
            } else {
              this.$message.error(res.msg)
            }
          });
        }
      });
    },

    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateProject(this.form).then(response => {
              this.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addProject(this.form).then(response => {
              this.msgSuccess("立项成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /**
     * 展示详情
     */
    handleDetail (row) {
      this.projectExpenseDetail = undefined;
      this.projectDetail = undefined;
      this.projectId = row.projectId;
      let options = {
        text:'加载中,请稍后',
        lock: false,
        body:false,
        customClass: 'loadingData'
      }
      let loadingInstance = Loading.service(options);
      projectDetailById(this.projectId).then(res => {
        if(res.code === 0){
          this.projectDetail = res.data;
          this.detailDialogVisible = true
          this.msgSuccess("项目详情获取成功");
          loadingInstance.close();
        }else{
          this.msgSuccess(res.msg);
          loadingInstance.close();
        }
      }).catch( res =>{
        loadingInstance.close();
      });
      this.getProjectExpenseDetailList();
    },
    //获取项目费用列表
    getProjectExpenseDetailList(){
      let query = {
        page: this.projectExpensePage,
        size: this.projectExpenseSize,
      }
      projectExpenseDetailById(this.projectId,query).then(res => {
        if(res.code === 0){
          this.projectExpenseDetail = res.data;
          this.msgSuccess("缴费信息获取成功");
        }else{
          this.msgSuccess(res.msg);
        }
      });
    }

  }
};
</script>

<style>
  .title{
    font-weight: bold;
    font-size: large;
  }

  .el-divider--horizontal {
    display: block;
    height: 1px;
    width: 100%;
    margin: 8px 0;
  }

  .my-img .el-image__inner,
  .el-image__error {
    visibility: hidden;
  }

  /*.el-form-item {*/
  /*  margin-bottom: 16px;*/
  /*}*/

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 128px;
    height: 128px;
    line-height: 128px;
    text-align: center;
  }
  .avatar {
    width: 128px;
    height: 128px;
    display: block;
  }

  .loadingData {
    z-index: 100000;
  }

</style>
